import React, { useState } from 'react';
import { Button, Space, Table, Tag, Modal } from 'antd';
import type { TableProps } from 'antd';
import dayjs from 'dayjs';
import Myform from './myform';

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}


import { useAppSelector, useAppDispatch } from '../../stores/getStateTs';
import { action_update } from '../../stores/climary';

const Zhizuo: React.FC = (props) => {
    let obj = useAppSelector(store => store.qwe)
    let dispatch = useAppDispatch()

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '优惠券名称',
            dataIndex: 'title',
        },
        {
            title: '优惠券面值',
            dataIndex: 'mianzhi',
        },
        {
            title: '优惠券最低消费',
            dataIndex: 'zuidi',
        },
        {
            title: '优惠券有效期限',
            dataIndex: 'qixian',
        },
        {
            title: '排序',
            dataIndex: 'paixu',
        },
        {
            title: '状态',
            dataIndex: 'collect',
            render: (collect) => {
                return <Tag color={collect ? 'blue' : 'error'}>{collect ? '开启' : '关闭'}</Tag>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            render: (time) => {
                return dayjs(time).format('YYYY-HH-DD hh:mm:ss')
            }
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => {
                        // props.history.push('/admin/fabu')
                    }}>发布</Button>
                    <Button>操作</Button>
                </Space>
            ),
        },
    ];

    //分页
    const [current, setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(2)
    const [total, setTotal] = useState(obj.list.length)


    //对话框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let [title, setTitle] = useState('')


    return <div>

        <Button type="primary" onClick={() => {
            showModal()
            setTitle('添加')
        }}>
            添加
        </Button>
        <Modal
            title={title}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
        >
            <Myform title={title} showModal={handleCancel} key={new Date().getTime()} />
        </Modal>



        <Table<DataType> columns={columns} dataSource={obj.list} rowKey={'id'} pagination={{
            current, pageSize, total, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: [3, 5, 9], onChange: ((page, pageSize) => {
                setCurrent(page)
                setPageSize(pageSize)
            })
        }} />
    </div>
}

export default Zhizuo;